<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>KoAbra</title>
        <!-- Подключаемые стили-->
        <link href="css/styles1.css" rel="stylesheet" type="text/css"/>
        <link href="css/styles2.css" rel="stylesheet" type="text/css" />
        <!-- Подключаемые скрипты-->
        <script type="text/javascript" src="libraries/jquery-min.js"></script>
        <script type="text/javascript" src="libraries/jCanvaScript.1.2.js"></script>
        <script type="text/javascript" src="js/Main.js"></script>
        <script type="text/javascript" src="js/WebSocket.js"></script>
        <script type="text/javascript" src="js/Gamer.js"></script>
        <script type="text/javascript" src="js/ViewMap.js"></script>
        <script type="text/javascript" src="js/Map_matrix.js"></script>
        <script type="text/javascript" src="js/Move_matrix.js"></script>
        <script type="text/javascript" src="js/ViewLittleMap.js"></script>
        <script type="text/javascript" src="js/Map.js"></script>        
	</head>
	<body>
		<nav>
			<!-- Панель навигации -->
	        <ul>
				<li><input id="home" type="button" value="home" onclick="Go_Home();"></li>
				<li><input id="about" type="button" value="Об игре"></li>
				<li><input id="registration" type="button" value="регистрация"></li>
				<li><input id="authorization" type="button" value="авторизация" onclick="Go_Autorization();"></li>
				<li id="search" class="search">
					<input type="text" id="search_input" name="search_input" value="Search" required />
					<input type="button" name="search_button" id="search_button" value="" required />
				</li>
			</ul>
		</nav>
		<header id="head">
            <!-- Заголовок страницы -->
			<div class="logo">
				<a href="#"><b>The World of</b> KoAbra</a>
			</div>
		</header>
		<section id="intro">
			<!-- Приветствие -->
			<div class="intro_bot">
                <!-- Область для заполнения -->
			</div>
		</section>
		<section id="content">
            <!-- Содержимое страницы -->
			<section id="maincontent">
				<!-- Об игре -->
				<div class="pad">
					<h3>Что есть KoAbra???</h3>
					<p><h5>Играют две команды по N игроков в каждой. Союзники находятся на одной карте,
                        противники – на отдельной идентичной. У каждого игрока есть свой город, который он развивает
                        и строит войска для борьбы. Союзники могут обмениваться ресурсами. На каждой карте находится
                        N артефактов. Как только игрок поднимает артефакт, он начинает светиться на карте противника.
                        Противник может вступить с ним в бой, если у того тоже поднят артефакт. Битва происходит 1 на 1
                        войсками каждого из игроков за артефакт. Битва происходит на отдельной локации. В это время
                        остальные игроки делают свои ходы не зависимо от этой битвы.
                        Побеждает та команда, которая соберет все артефакты.
                    </h5></p>
                    <p><h5>
                        <a>Карта:</a>
                        Карта nxn состоит из квадратов. На карте предусмотрены несколько типов местности: вода,
                        равница, холм, болото, гора. Свойства того или иного типа влияют на
                        движение юнитов, местонахождение ресурсов.
                    </h5></p>
                    <p><h5>
                        <a>Юниты:</a>
                        У каждого игрока по одному юниту (герою).
                    </h5></p>
                    <p><h5>
                        <a>Задачи героя:</a>
                            - открытие закрытых участков карты
                            - поиск ресурсов
                            - поиск артефактов
                            - битва с героем противника за артефакт
                            - выполнение заданий
                    </h5></p>
                    <p><h5>
                        У героя есть своя армия, которую он формирует посредством усовершенствования города.
                        Время «Ч»:
                        Время "Ч" - битва между двумя героями за артефакт с участием армии этого героя.
                        Время "Ч" наступает только в случае, когда оба героя подняли артефакт, в результате чего
                        стали видны на карте противника, и встретились на одной клетке (герой может и убежать от битвы).
                        Артефакт можно положить на землю. Тогда герой перестанет светиться на карте противника.
                        А значит время "Ч" наступить для него не может.
                        Битва происходит на отдельной локации. В это время остальные игроки делают свои ходы не
                        зависимо от этой битвы.
                    </h5></p>
                    <p><h5>
                        <a>Город:</a>
                        Город тоже отдельная локация. Здесь находятся все постройки на территории города.
                        У каждого героя есть один и только один город, который он должен развивать по одному из
                        нескольких возможных сценариев.
                        На карте обеих команд находится равное количество артефактов.
                        Из них собирается один главный артефакт, сбор которого и является целью данной игры.
                        Артефакты завоевываются и теряются во время "Ч". За битву - 1 артефакт.
                        Те артефакты, что были завоеваны, могут снова быть отвоеваны.
                    </h5></p>
				</div>
			</section>
            <section id="Autorization" class="Area">
                <!-- Область авторизации-->
                <form id="formAuto" class="Form">
                    <div id="ToConnect">
                        <div>
                            <label>Нажмите для соединения</label>
                        </div>
                        <label for="Connection">Сервер: </label>
                        <input type="text" class="text" id="Connection" />
                        <input id='ToggleConnection' type="button" class="button" value="Подключиться"
                            onclick='ToggleConnectionClicked();'/>
                        <br />
                    </div>
                    <div id='SendDataContainer'>
                        <label for="form-name">Логин: </label>
                        <input type="text" class="text" id="form-name">
                        <input type="button" id="SendData" class="button" value="Войти" onclick="SendDataClicked();"/>
                        <br />
                        <br />
                    </div>
                </form>
            </section>
            <section id="ChoiceType" class="Area">
                <!-- Область выбора игры-->
                <div id='GameList' class='List' hidden="true"></div>
                <form id="formChoice" class="Form">
                    <br/>
                    <select id="SelectGame"></select>
                    <input type="button" class="button" id="refresh" value="Обновить" onclick="Get_gamelist();">
                    <input type="button" class="button" id="connect" value="Поехали!" onclick="Game_Connect();">
                    <input type="button" class="button" id="new" value="Создать" onclick="Create_Game();">
                </form>               
            </section>
            <section id="ConnectGame" class="Area">
                <!-- Область подключения к игре-->
                <h1>Вы выбрали игру!</h1>
                <br />
                <div id="GameName"></div>
            </section>
            <section id="NewGame" class="Area">
                <!-- Область параметров создаваемой игры-->
                <label><a><h2>Создание новой игры</h2></a></label>
                <br/>
                <div id="MapList" class="List" hidden="true"></div>
                <form id="formNewGame" class="Form">
                    <div>
                        <input type="button" id="btGetMapList" class="button" value="Получить список карт"
                            onclick="GetMapList();">
                        <label>Выберите карту:</label>
                        <select id="SelectMap"><!-- Выбор карты --></select>
                        <br/>
                    </div>
                    <div>
                        <label>Введите название игры:</label>
                        <input type="text" class="text" id="txNewGameName">
                        <br/>
                    </div>
                    <div>
                        <input type="button" class="button" id="btCreateNewGame" value="Создать игру"
                            onclick="CreateNewGame();">
                        <select id="SelectTeam">
                            <!-- Выбор команды -->
                            <option selected>NONE</option>
                            <option>A</option>
                            <option>B</option>
                        </select>
                        <br/>
                    </div>
                </form>
                <div id="ChoiceTeam" hidden="true">
                    <!-- Область выбора команды -->
                </div>
            </section>
            <section id="Game_area">
                <!-- Область самой игры -->
                <div id="Map_area">
                    <canvas id="Map" width="810" height="430">
                        <!-- Холст большой карты -->
                    </canvas>
                </div>
                <div id="Nav_and_LMap">
                    <div id="Little_map_area">
                        <canvas id="LittleMap" width="330" height="170">
                            <!-- Холст малой карты -->
                        </canvas>
                    </div>
                    <div id="Game_Nav_area">
                        <form id="formGameNav" class="formGameNav">
                            <!-- Кнопки навигации по игре -->
                            <!--кнопка для того, чтобы перемещать юнита-->
                            <input type="button" id="btUnitGo" class="button" value="Go" onclick="goTo();"/>
                        </form>
                    </div>
                </div>                
                <div id="chatBox" class="chatBox">
                    <!-- Область вывода сообщений чата-->
                </div>
                <div id="Chat_area">
                    <form id="formChat" class="formChat">
                        <!-- Форма отправки сообщений в чат -->
                        <input id="chat_message" type="text" class="text">
                        <input type="button" id="btChatMes" class="button" value="Отправить"
                            onclick="Sent_Chat_Message();"/>
                    </form>
                </div>
            </section>
            <section id='LogContainer' class='box'></section>
		</section>
		<footer>
			<!-- Футер -->
			<div class="footer_center">
				<div class="pad">
					<div class="footer_column">
						<h3>Разработчики</h3>
						<p><h4>Сервер: Ковш Дмитрий, группа 850505</h4></p>
						<p><h4>Клиент: Абраменко Максим, группа 850505</h4></p>
					</div>
				</div>
			</div>
			<div class="footer_bot">
				<p>Design by Maks Abramenko</p>
			</div>
		</footer>
	</body>
</html>